<template>
  <!--电台列表-->
  <div class="policy">
    <el-card class="box-card" style="margin-top: 35px;border-radius: 20px;">
      <div class="policy-header">
        <!--      <div class="">-->
        <div  style="display: flex;align-items: center">
          <h2>常用工具管理</h2>
          <el-button @click="add" icon="el-icon-plus" style="margin-left: 20px;background: #699FF3;color: #fff;border-radius: 10px"></el-button>
        </div>

        <!-- <div class="search-box" style="display: flex;align-items: center">
          <el-form :inline="true" class="demo-form-inline" style="display: flex;align-items: center">
            <el-form-item style="font-size:12px;margin-right:30px;margin-bottom: 0">
              <el-input v-model="form.classificationName" placeholder="请输入电台名称" clearable @clear="getList" prefix-icon="el-icon-search"/>
            </el-form-item>
            <el-form-item style="font-size:12px;margin-right:30px;margin-bottom: 0">
              <el-select v-model="form.category_id" placeholder="选择分类" clearable style="width: 80%;">
                <el-option v-for="(item,index) in categoryList" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="display: flex;align-items: center;margin-bottom: 0">
              <el-button style="background: #699FF3;color: #fff;border-radius: 24px;margin-bottom: 0" @click="search">查询</el-button>
            </el-form-item>
          </el-form>
        </div> -->
      </div>
      <!--       列表-->
      <div class="list">
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{background:'#F4F4F4',border:'none'}"
        >
          <el-table-column label="图标" align="center">
            <template slot-scope="scope">
              <el-image
                style="width: 80px; height: 80px"
                :src="imgURL + scope.row.icon"
                :fit="'cover'"
                :preview-src-list="[imgURL + scope.row.icon]"></el-image>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="名称"
            align="center"
          />
          <el-table-column label="跳转类型" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.type=='link'">链接</span>
              <span v-if="scope.row.type=='mini'">小程序</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="url"
            label="链接"
            align="center"
          />
          <el-table-column
            prop="appid"
            label="appid"
            align="center"
          />
          <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" icon="el-icon-edit" style="color: #409EFF;" @click="edit(scope)">编辑</el-button>
              <el-button type="text" size="small" icon="el-icon-delete" style="color: #F56C6C;" @click="del(scope)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

      </div>
      <!-- <div class="paging-device">
        <Pagingdevice
          ref="paging"
          :total-count="totalCount"
          :current_page="current_page"
          :per_page="per_page"
          @select="select"
          @changep="changep"
        />
      </div> -->
    </el-card>

    <AddService v-if="isShow" @closeAlert="closeAlert" :state="state" :item="item"></AddService>
  </div>
</template>

<script>
import {settingInfo,settingSet,imgURL} from "@/api"

import Pagingdevice from '@/components/Pagingdevice'
import AddService from './components/addService'
export default {
  name: "musicList",
  components: {
    Pagingdevice,
    AddService
  },
  data() {
    return {
      state: 'add',
      item:{},
      isShow: false,
      imgURL,
      form:{
        classificationName:'',
        category_id:''
      },
      categoryList:[],
      tableData:[
            // {
            //     "name": "物流查询",
            //     "type": "mini",
            //     "icon": "\/storage\/2024\/04\/50XN7NE7WkWvYQGko0IQiXEGGM0xBIpmDnjWSOWF.png",
            //     "appid": "wx2c348cf579062e56",
            //     "url": "",
            // },
            // {
            //     "name": "费用补缴",
            //     "type": "mini",
            //     "icon": "\/storage\/2024\/04\/50XN7NE7WkWvYQGko0IQiXEGGM0xBIpmDnjWSOWF.png",
            //     "appid": "wx2c348cf579062e56",
            //     "url": "",
            // },
            // {
            //     "name": "费用查询",
            //     "type": "mini",
            //     "icon": "\/storage\/2024\/04\/50XN7NE7WkWvYQGko0IQiXEGGM0xBIpmDnjWSOWF.png",
            //     "appid": "wx2c348cf579062e56",
            //     "url": "",
            // },
            // {
            //     "name": "帮助中心",
            //     "type": "mini",
            //     "icon": "\/storage\/2024\/04\/50XN7NE7WkWvYQGko0IQiXEGGM0xBIpmDnjWSOWF.png",
            //     "appid": "wx2c348cf579062e56",
            //     "url": "",
            // },
        ],
      totalCount: 0,
      current_page: 1,
      per_page:10,
    };
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 列表
    async getList(){
      console.log('列表')
      await settingInfo({
        keys:'commonTools'
      }).then(res=>{
        console.log(res)
        if (res.code==10000){
          this.tableData = JSON.parse(res.data.commonTools);
          // this.totalCount=res.data.meta.total
        }
      })
    },
    // 搜索
    search(){
      this.current_page=1
      this.getList()
    },
    // 添加
    add(){
      this.state = 'add'
      this.isShow = true
    },
    // 编辑
    edit(item){
      this.item = item
      this.state = 'edit'
      this.isShow = true
      // convenientEdit
    },
    // 关闭弹窗
    closeAlert(bool){
      this.isShow = bool
      this.getList()
    },
    // 删除
    async del(item){
      console.log(this.tableData,item)

      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableData.splice(item.$index,1)
        settingSet({
          key:'commonTools',
          value:JSON.stringify(this.tableData),
          value_type:'json',
          is_active:true
        }).then(res=>{
          if(res.code == 10000){
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getList()
          }
        })
      }).catch((e) => {
        console.log(e)
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    select(num,data){
      this.current_page = num;
      this.per_page = data;
      this.getList()
    },
    changep(num){
      this.current_page = num;
      this.getList()
    }
  }
}
</script>

<style scoped lang="scss">
.policy {
  font-size: 14px;
  padding: 0 80px;
  box-sizing: border-box;
  color: #000;
  &-header {
    margin: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .class-box {

      //float: right;
      margin-bottom: 5px;
    }
    .add-btn {
      width: 100px;
      height: 40px;
      border-radius: 5px;
      background: #1184e6;
      color: #ffffff;
      text-align: center;
      line-height: 40px;
    }
    .add-btn {
      margin-left: 80px;
    }
  }
  .list {
    margin: 30px;
    text-align: center;
  }
  .paging-device {
    margin: 30px;

  }
}

</style>
<style>
.el-table__header-wrapper{
  border-radius: 10px;
}
</style>

